import React, { Component } from 'react'
import { Link, RouteComponentProps } from 'react-router-dom';
import { InputItem,Button,List} from 'antd-mobile'
import {CHANGE_INPUT,ADD_LIST,DEL_LIST} from './redux/actionType'
import { Post, Get, Patch, Put } from '../../utils/utilHttp'
import {changeInputAct,addListAct,delListAct,getListAct} from './redux/actionCreate'
import store from './redux/store'

import Top from '../../components/top/top'
import TodoListUi from './todoListUi'

interface IProps extends RouteComponentProps {
}
//redux 使用实例
class Redux extends Component<IProps,any> {
  constructor(props:any) {
    super(props);
    this.state = store.getState();
    //订阅监听redux的变化
    store.subscribe(this.storeChange);
  }
  state={
    inputValue:'',
    list:[]
  }
  componentDidMount(){
    setTimeout(() => {
      let resData=['吃饭1','睡觉1','打豆豆1'];
      store.dispatch(getListAct(resData))
    }, 2000);
  }
  changeInput=(value:any)=>{
    // this.setState({inputValue:e.target.value});
    //修改全局数据
    store.dispatch(changeInputAct(value));
  }
  //获取redux数据
  storeChange=()=>{
    this.setState(store.getState())
  }
  add =()=>{
    let {inputValue}=this.state;
    if(inputValue){
      store.dispatch(addListAct(inputValue));
    }
  }
  del=(index:number)=>{
    let {list}=this.state;
    list.splice(index,1);
    store.dispatch(delListAct(list));
  }
  render() {
    let { list,inputValue } =this.state;
    return (
      <div className='todo_list'>
        <Top history={this.props.history}></Top>
        <TodoListUi list={list} inputValue={inputValue} changeInput={this.changeInput} add={this.add} del={this.del}></TodoListUi>
        {/* <InputItem type='text' onChange={this.changeInput}></InputItem>
        <Button onClick={()=>{this.add()}}>添加</Button>
        {
          list.map((item,index)=>{
            return (<Button key={index} onClick={()=>{this.del(index)}}>{item}</Button>)
          })
        } */}
      </div>
    )
  }
}

export default Redux;